<template>
    <div>
        <basic-layout title="消息详情" :showAddBtn="false">
            <div class="columnFlex">
                <van-row class="listCon">
                    <div class="content">
                        <van-pull-refresh v-model="loading" @refresh="getMessageDetail">
                            <detail ref="detailRef"></detail>
                        </van-pull-refresh>
                    </div>
                </van-row>
            </div>
            <span class="option" v-if="mbUrl" @click="handleClick()">去处理 <van-icon name="arrow" /></span>
        </basic-layout>
    </div>
</template>

<script>
    import { queryMailDetail } from '@/api/platframe/mainFrame/message.js';

    export default {
        data () {
            return {
                loading: false,
                mailId: '',
                mbUrl: ''
            };
        },
        created () {
            this.mailId = this.$route.query.mailId;
            this.getMessageDetail();
        },
        methods: {
            // 获取消息详情
            getMessageDetail () {
                this.loading = true;
                queryMailDetail(this.mailId).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.mbUrl = res.data.mbUrl;
                        let detailInfo = [
                            {
                                title: '消息类型',
                                prop: 'msgTypeName',
                                value: res.data.msgTypeName
                            },
                            {
                                title: '发送人',
                                prop: 'senderName',
                                value: res.data.senderName
                            },
                            {
                                title: '发送时间',
                                prop: 'sendTime',
                                value: res.data.sendTime
                            },
                            {
                                title: '消息内容',
                                prop: 'content',
                                value: res.data.content
                            }
                        ];
                        this.$refs.detailRef.getData(detailInfo);
                    }
                }).catch(() => {
                    this.loading = false;
                })
            },
            handleClick () {
                this.$router.push({ name: this.mbUrl });
            }
        }
    };
</script>

<style scoped lang="less">
    .listCon {
        padding-top: 10px;
        padding-bottom: 10px;
        .content {
            height: 100%;
            overflow: auto;
            background: #fff;
            border-radius: 5px;
            .van-pull-refresh {
                min-height: 100%;
            }
        }
    }
    .option {
        position: absolute;
        right: 12px;
        top: 15px;
        color: #fff;
        z-index: 9;
        font-size: 10px;
    }
</style>